<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Dashboard | Nifty - Admin Template</title>


    <!--STYLESHEET-->
    <!--=================================================-->

    <!--Open Sans Font [ OPTIONAL ]-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>


    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="../../static/backstage/css/bootstrap.min.css" rel="stylesheet">


    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="../../static/backstage/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="../../static/backstage/css/demo/nifty-demo-icons.min.css" rel="stylesheet">


    <!--=================================================-->


    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="../../static/backstage/plugins/pace/pace.min.css" rel="stylesheet">
    <script src="../../static/backstage/plugins/pace/pace.min.js"></script>


    <!--Demo [ DEMONSTRATION ]-->
    <link href="../../static/backstage/css/demo/nifty-demo.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../static/backstage/css/zTreeStyle.css">


</head>
<style>
    #demo-nifty-settings {
        display: none !important;
    }
    .treebox {
        width: 300px;
        position: absolute;
        left: 0;
        right: 0;
        top: 200px;
        bottom: 0;
        margin: auto;
    }

    .wrap {
        text-align: center;
    }

    .ztree {
        padding-left: 200px;
        padding-top: 50px;
    }

    .ztree li span.button {
        background-position-x: -144px;
        background-position-y: -1px;
    }
</style>
<!--TIPS-->
<!--You may remove all ID or Class names which contain "demo-", they are only used for demonstration. -->
<body>
<div id="container" class="effect aside-float aside-bright mainnav-lg">

    <!--NAVBAR-->
    <!--===================================================-->
    <header id="navbar">
        <div id="navbar-container" class="boxed">

            <!--Brand logo & name-->
            <!--================================-->
            <div class="navbar-header">
                <a href="index.html" class="navbar-brand">
                    <img src="static/backstage/img/logo.png" alt="Nifty Logo" class="brand-icon">
                    <div class="brand-title">
                        <span class="brand-text">Nifty</span>
                    </div>
                </a>
            </div>
            <!--================================-->
            <!--End brand logo & name-->


            <!--Navbar Dropdown-->
            <!--================================-->
            <div class="navbar-content">
                <ul class="nav navbar-top-links">

                    <!--Navigation toogle button-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li class="tgl-menu-btn">
                        <a class="mainnav-toggle" href="#">
                            <i class="demo-pli-list-view"></i>
                        </a>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End Navigation toogle button-->

                </ul>
                <ul class="nav navbar-top-links">


                    <!--Mega dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End mega dropdown-->


                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End notifications dropdown-->


                    <!--User dropdown-->
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <li id="dropdown-user" class="dropdown">
                        <a href="#" data-toggle="dropdown" class="dropdown-toggle text-right">
                                <span class="ic-user pull-right">
                                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                    <!--You can use an image instead of an icon.-->
                                    <!--<img class="img-circle img-user media-object" src="img/profile-photos/1.png" alt="Profile Picture">-->
                                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                                    <i class="demo-pli-male"></i>
                                </span>
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                            <!--You can also display a user name in the navbar.-->
                            <!--<div class="username hidden-xs">Aaron Chavez</div>-->
                            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        </a>


                        <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right panel-default">
                            <ul class="head-list">
                                <li>
                                    <a href="pages-login.html"><i class="demo-pli-unlock icon-lg icon-fw"></i>
                                        Logout</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                    <!--End user dropdown-->
                </ul>
            </div>
            <!--================================-->
            <!--End Navbar Dropdown-->

        </div>
    </header>
    <!--===================================================-->
    <!--END NAVBAR-->

    <div class="boxed">

        <!--CONTENT CONTAINER-->
        <!--===================================================-->

        <!--===================================================-->
        <!--END CONTENT CONTAINER-->
        <div class="treebox">
            <div class="wrap">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>


        <!--MAIN NAVIGATION-->
        <!--===================================================-->
        <nav id="mainnav-container">
            <div id="mainnav">


                <!--OPTIONAL : add YOUR LOGO TO THE NAVIGATION-->
                <!--It will only appear on small screen devices.-->
                <!--================================
                <div class="mainnav-brand">
                    <a href="index.html" class="brand">
                        <img src="img/logo.png" alt="Nifty Logo" class="brand-icon">
                        <span class="brand-text">Nifty</span>
                    </a>
                    <a href="#" class="mainnav-toggle"><i class="pci-cross pci-circle icon-lg"></i></a>
                </div>
                -->


                <!--Menu-->
                <!--================================-->
                <div id="mainnav-menu-wrap">
                    <div class="nano">
                        <div class="nano-content">

                            <!--Profile Widget-->
                            <!--================================-->
                            <!-- <div id="mainnav-profile" class="mainnav-profile">
                                <div class="profile-wrap text-center">
                                    <div class="pad-btm">
                                        <img class="img-circle img-md" src="img/profile-photos/1.png" alt="Profile Picture">
                                    </div>
                                    <a href="#profile-nav" class="box-block" data-toggle="collapse" aria-expanded="false">
                                        <span class="pull-right dropdown-toggle">
                                            <i class="dropdown-caret"></i>
                                        </span>
                                        <p class="mnp-name">Aaron Chavez</p>
                                        <span class="mnp-desc">aaron.cha@themeon.net</span>
                                    </a>
                                </div>
                                <div id="profile-nav" class="collapse list-group bg-trans">
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-male icon-lg icon-fw"></i> View Profile
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-gear icon-lg icon-fw"></i> Settings
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-information icon-lg icon-fw"></i> Help
                                    </a>
                                    <a href="#" class="list-group-item">
                                        <i class="demo-pli-unlock icon-lg icon-fw"></i> Logout
                                    </a>
                                </div>
                            </div> -->


                            <!--Shortcut buttons-->
                            <!--================================-->
                            <div id="mainnav-shortcut" class="hidden">
                                <ul class="list-unstyled shortcut-wrap">
                                    <li class="col-xs-3" data-content="My Profile">
                                        <a class="shortcut-grid" href="#">
                                            <div class="icon-wrap icon-wrap-sm icon-circle bg-mint">
                                                <i class="demo-pli-male"></i>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Messages">
                                        <a class="shortcut-grid" href="#">
                                            <div class="icon-wrap icon-wrap-sm icon-circle bg-warning">
                                                <i class="demo-pli-speech-bubble-3"></i>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Activity">
                                        <a class="shortcut-grid" href="#">
                                            <div class="icon-wrap icon-wrap-sm icon-circle bg-success">
                                                <i class="demo-pli-thunder"></i>
                                            </div>
                                        </a>
                                    </li>
                                    <li class="col-xs-3" data-content="Lock Screen">
                                        <a class="shortcut-grid" href="#">
                                            <div class="icon-wrap icon-wrap-sm icon-circle bg-purple">
                                                <i class="demo-pli-lock-2"></i>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <!--================================-->
                            <!--End shortcut buttons-->


                            <ul id="mainnav-menu" class="list-group">

                                <!--Category name-->
                                <li class="list-header">Navigation</li>

                                <!--Menu list item-->
                                <li class="active-sub">
                                    <a href="index.html">
                                        <i class="demo-pli-home"></i>
                                        <span class="menu-title">分类管理</span>

                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="/backstage/article">
                                        <i class="demo-pli-split-vertical-2"></i>
                                        <span class="menu-title">文章管理</span>

                                    </a>
                                    </li>

                                    <!--Menu list item-->
                                <li>
                                    <a href="user.html">
                                        <i class="demo-pli-gear"></i>
                                        <span class="menu-title">
                                                    用户管理
                                                </span>
                                    </a>
                                </li>
                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-pli-boot-2"></i>
                                        <span class="menu-title">登录信息管理</span>

                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-pli-pen-5"></i>
                                        <span class="menu-title">标签管理</span>

                                    </a>

                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="title.html">
                                        <i class="demo-pli-receipt-4"></i>
                                        <span class="menu-title">标题管理</span>

                                    </a>

                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="#">
                                        <i class="demo-pli-bar-chart"></i>
                                        <span class="menu-title">搜索管理</span>

                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="keyword.html">
                                        <i class="demo-pli-repair"></i>
                                        <span class="menu-title">关键字管理</span>

                                    </a>

                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="paylist.html">
                                        <i class="demo-pli-warning-window"></i>
                                        <span class="menu-title">购买记录</span>

                                    </a>
                                </li>

                                <!--Menu list item-->
                                <li>
                                    <a href="sponsor.html">
                                        <i class="demo-pli-computer-secure"></i>
                                        <span class="menu-title">赞助编辑</span>

                                    </a>

                                </li>

                            </ul>


                        </div>
                    </div>
                </div>
                <!--================================-->
                <!--End menu-->

            </div>
        </nav>
        <!--===================================================-->
        <!--END MAIN NAVIGATION-->

    </div>


    <!-- FOOTER -->
    <!--===================================================-->
    <footer id="footer">

        <!-- Visible when footer positions are fixed -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="show-fixed pad-rgt pull-right">
            You have <a href="#" class="text-main"><span class="badge badge-danger">3</span> pending action.</a>
        </div>


        <!-- Visible when footer positions are static -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <div class="hide-fixed pull-right pad-rgt">
            14GB of <strong>512GB</strong> Free.
        </div>


        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- Remove the class "show-fixed" and "hide-fixed" to make the content always appears. -->
        <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <p class="pad-lft">&#0169; 2018 Your Company</p>


    </footer>
    <!--===================================================-->
    <!-- END FOOTER -->


    <!-- SCROLL PAGE BUTTON -->
    <!--===================================================-->
    <button class="scroll-top btn">
        <i class="pci-chevron chevron-up"></i>
    </button>
    <!--===================================================-->
</div>
<!--===================================================-->
<!-- END OF CONTAINER -->


<!--JAVASCRIPT-->
<!--=================================================-->

<!--jQuery [ REQUIRED ]-->
<script src="../../static/backstage/js/jquery.min.js"></script>
<!--BootstrapJS [ RECOMMENDED ]-->
<script src="../../static/backstage/js/bootstrap.min.js"></script>


<!--NiftyJS [ RECOMMENDED ]-->
<script src="../../static/backstage/js/nifty.min.js"></script>


<!--=================================================-->

<!--Demo script [ DEMONSTRATION ]-->
<script src="../../static/backstage/js/demo/nifty-demo.min.js"></script>


<!--Flot Chart [ OPTIONAL ]-->
<script src="../../static/backstage/plugins/flot-charts/jquery.flot.min.js"></script>
<script src="../../static/backstage/plugins/flot-charts/jquery.flot.resize.min.js"></script>
<script src="../../static/backstage/plugins/flot-charts/jquery.flot.tooltip.min.js"></script>


<!--Sparkline [ OPTIONAL ]-->
<script src="../../static/backstage/plugins/sparkline/jquery.sparkline.min.js"></script>


<!--Specify page [ SAMPLE ]-->
<script src="../../static/backstage/js/demo/dashboard.js"></script>
<script src="../../static/backstage/js/jquery.ztree.all.js"></script>
<script>
    var setting = {
        view: {
            addHoverDom: addHoverDom,
            removeHoverDom: removeHoverDom,
            selectedMulti: false
        },
        edit: {
            enable: true,
            editNameSelectAll: true,
            showRemoveBtn: true,
            showRenameBtn: true,
            removeTitle: '删除',
            renameTitle: '重命名'
        },
        data: {
            simpleData: {
                enable: true,
                pIdKey: "pid",
                idKey: 'zid'
            },
            key: {
                children: "children"
            }
        },
        callback: {
            beforeDrag: beforeDrag,
            beforeEditName: beforeEditName,
            beforeRemove: beforeRemove,
            onRemove: onRemove,
            onRename: onRename
        }
    };
    var zNodes = [{id: 0, zid: 'MO0', pid: 0, name: "分类管理", pids: "--0--", level: 0, open: true}];
    // $.ajax({
    //     url: `${API}/erpModel/getModelCustomerByModelIdList`,
    //     type: 'get',
    //     success: function (res) {

    //         zNodes = zNodes.concat(res.data);
    //         zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    //     }
    // })
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    var log, className = "dark";

    function beforeDrag(treeId, treeNodes) {
        return false;
    }

    function beforeEditName(treeId, treeNode) {
        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);

    }

    function beforeRemove(treeId, treeNode) {

        className = (className === "dark" ? "" : "dark");
        showLog("[ " + getTime() + " beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.selectNode(treeNode);
        if (confirm("确认删除'" + treeNode.name + "' ?")) {

            $.ajax({
                url: `${API}/erpModel/removeModelCustomerById?ModelId=${treeNode.id}`,
                type: 'get',
                success: function (res) {

                }
            })
        } else {
            return false;
        }
    }

    function onRemove(e, treeId, treeNode) {
        showLog("[ " + getTime() + " onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
    }

    function beforeRename(treeId, treeNode, newName, isCancel) {
        // className = (className === "dark" ? "" : "dark");
        // showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        // if (newName.length == 0) {
        //     setTimeout(function () {
        //         var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        //         zTree.cancelEditName();
        //         alert("Node name can not be empty.");
        //     }, 0);
        //     return false;
        // }
        return true;
    }

    function onRename(e, treeId, treeNode, isCancel) {
        showLog((isCancel ? "<span style='color:red'>" : "") + "[ " + getTime() + " onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>" : ""));
        let zid = treeNode.zid
        let bol = true
        if (treeNode.zid) {
            bol = false

        } else {
            zid = 'SF0' + new Date().getTime()
        }

        $.ajax({
            url: `${API}/erpModel/inertOrUpdateModelCustomer?addOrXiuGai=${bol}&id=${treeNode.id}&pid=${treeNode.pid}&name=${treeNode.name}&zid=${zid}&iszh=${typeof (treeNode.iszh) ? '' : treeNode.iszh}`,
            type: 'get',
            success: function (res) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                treeNode.zid = zid
                zTree.updateNode(treeNode);
            }
        })

    }

    function showRemoveBtn(treeId, treeNode) {
        return !treeNode.isFirstNode;
    }

    function showRenameBtn(treeId, treeNode) {
        return !treeNode.isLastNode;
    }

    function showLog(str) {
        if (!log) log = $("#log");
        log.append("<li class='" + className + "'>" + str + "</li>");
        if (log.children("li").length > 8) {
            log.get(0).removeChild(log.children("li")[0]);
        }
    }

    function getTime() {
        var now = new Date(),
            h = now.getHours(),
            m = now.getMinutes(),
            s = now.getSeconds(),
            ms = now.getMilliseconds();
        return (h + ":" + m + ":" + s + " " + ms);
    }

    var newCount = 1;

    function addHoverDom(treeId, treeNode) {

        var sObj = $("#" + treeNode.tId + "_span");
        if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
        var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
            + "' title='add node' onfocus='this.blur();'></span>";
        sObj.after(addStr);
        var btn = $("#addBtn_" + treeNode.tId);
        if (btn) btn.bind("click", function () {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.addNodes(treeNode, {id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++)});
            return false;
        });
    };

    function removeHoverDom(treeId, treeNode) {
        $("#addBtn_" + treeNode.tId).unbind().remove();
    };

    function selectAll() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo");
        zTree.setting.edit.editNameSelectAll = $("#selectAll").attr("checked");
    }

</script>


</body>
</html>
